<html>
    <head>

      <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8" />
      <link rel="stylesheet" href="css/vudo-inspector.css" type="text/css" media="screen" title="no title" charset="utf-8" />
      <link rel="stylesheet" href="css/vudo-ui.css" type="text/css" media="screen" title="no title" charset="utf-8" />
      <link rel="stylesheet" href="css/vudo-general.css" type="text/css" media="screen" title="no title" charset="utf-8" />
      
    </head>
    <body>

        <script>
            function log(text) {
              var t = document.createTextNode(text);
              var n = document.createElement("div");
              n.appendChild(t)

              document.getElementById("log").appendChild(n);
            }

            var do_reload = function() {
              log("**reload**");
              window.HUD.reloadMainFrame();
            };

            var do_modify = function() {
              log("**modify**");
              var dom = window.HUD.mainFrameDOM();
              log("Got DOM:" + dom);

              e = dom.getElementById("foo");
              log("Got Element:" + e);


              e.innerHTML = "Hello, world!";
            }

            log("Loaded ...");

            log("mainFrameDOM:" + window.HUD.mainFrameDOM() );
        </script>



      <div id="vudo-inspector">
        <fieldset class="vudo-background-dark">
          <label for="title" class="block">Title</label>
          <input type="text" name="title" value="Page Title" id="title" class="bigString" />

          <label for="page-path" class="block">Page Path</label>
          <input type="text" name="page-path" value="Page Path" id="page-path" class="string" />
        </fieldset>
  
        <fieldset class="vudo-background-dark">
          <label for="description" class="block">Description</label>
          <textarea name="description" rows="4" cols="40" id="description" class=""></textarea>

          <label for="tags" class="block">tags</label>
          <textarea name="tags" rows="3" cols="40" id="tags" class=""></textarea>
        </fieldset>

        <a href="#" class="vudo-button-light right" onClick="do_reload();">save</a>
        <a href="#" class="vudo-button-light right" onClick="do_modify();">modify</a>
        
        <div class="clear"><!-- --></div>

        <div id="log" style="margin-top: 10px; padding: 10px; color: #ccc;" class="vudo-background-dark">
        </div>

      </div>

    </body>
</html>
